<template>
  <div class="page-content">
    <a-card style="width: 100%; height: 100%">
      <div class="header">
        <a-space class="left" direction="vertical" :size="[8, 12]">
          <Condition
            :condition="condition"
            :btns="['reset']"
            @search="onSearch"
            @reset="conditionReset"
          />
          <div class="title">共筛选出 {{ pagination.total }} 条数据</div>
        </a-space>
        <a-space class="right" direction="vertical" :size="[8, 12]">
          <a-input-search
            v-model:value="managePathName"
            placeholder="请输入管理路径名称"
            style="width: 220px"
            @search="onSearch"
          />
          <a-space>
            <a-button type="primary" @click="sortShow()" ghost>优先级管理</a-button>
            <a-button type="primary" @click="modalShow()">新建管理路径</a-button>
          </a-space>
        </a-space>
      </div>
      <div class="main">
        <a-table
          class="table"
          size="small"
          :loading="loading"
          :dataSource="List"
          :columns="columns"
          :pagination="pagination"
          @change="paginationChange"
          :sticky="{ offsetHeader: 0 }"
        >
          <template #bodyCell="{ column, text, index, record }">
            <template v-if="column.dataIndex === 'no'">
              {{ (pagination.current - 1) * pagination.pageSize + index + 1 }}
            </template>
            <template v-else-if="column.dataIndex === 'isSelect'">
              {{ record[column.dataIndex] ? '是' : '否' }}
            </template>
            <template v-else-if="column.dataIndex === 'createTime'">
              {{ timeFilter(record[column.dataIndex]) }}
            </template>
            <template v-else-if="column.dataIndex === 'action'">
              <a-button type="link" @click="modalShow(record)">查看详情</a-button>
              <a-button type="link" @click="Del(record)">删除路径</a-button>
            </template>
            <template v-else>
              {{ text }}
            </template>
          </template>
        </a-table>
      </div>
      <a-modal
        width="1200px"
        :bodyStyle="store.userStore.bodyStyle"
        v-model:open="modal2.open"
        :title="modal2.title"
        ok-text="确认"
        cancel-text="取消"
        :maskClosable="false"
      >
        <div class="modal2">
          <div class="table">
            <div class="td" style=" color: #1d2129;background: #f2f3f5">
              <div class="name" style="font-weight: 600">管理路径名称</div>
              <div class="content" style="font-weight: 600">路径概要</div>
              <div class="action" style="font-weight: 600">操作</div>
            </div>
            <draggable
              class="drag"
              :list="sortList"
              :handle="'.icon-move'"
              itemKey="id"
              animation="300"
            >
              <template #item="{ element, index }">
                <div class="td" style="border-bottom: 1px solid #e5e6eb">
                  <div class="name">
                    {{ element.managePathName }}
                  </div>
                  <div class="content">
                    {{ element.summary }}
                  </div>
                  <div class="action">
                    <img
                      style="width: 20px; height: 20px"
                      class="icon-move"
                      src="@/assets/manageRoute/sort.png"
                      alt=""
                    />
                    <!-- <icon-font class="icon-move" type="icon-yidong" /> -->
                  </div>
                </div>
              </template>
            </draggable>
          </div>
        </div>

        <template #footer>
          <a-button @click="modal2.open = false">取消</a-button>
          <a-button :loading="modal2.loading" type="primary" @click="modalConfirm2">确认</a-button>
        </template>
      </a-modal>
      <update
        ref="update"
        :diseaseType="props.diseaseType"
        @save="submit_save"
        @update="submit_update"
      />
    </a-card>
  </div>
</template>

<script lang="ts" setup name="管理路径">
import Condition from '@/components/Condition/index.vue'
import { message, Modal } from 'ant-design-vue'
import { h, createVNode, onMounted } from 'vue'
import Update from './components/update.vue'
import { timeFilter } from '@/utils/tools'
import { ExclamationCircleFilled } from '@ant-design/icons-vue'
import { getManageList, getManageListAll, manageDel, manageSort } from '@/api/manage'
import _ from 'lodash'
import { useDict } from './components/getDict'
import store from '@/store'
import draggable from 'vuedraggable'

const { creatorList, init } = useDict()

const managePathName = ref('')

const props = defineProps({
  diseaseType: {
    default: 'checkAfter'
  }
})

const condition = ref([
  {
    title: '创建者',
    dataIndex: 'creator',
    type: 'select',
    value: '',
    data: creatorList
  }
])
const conditionReset = () => {
  pagination.current = 1
  init()
  condition.value.map((v) => {
    v.value = ''
  })
  getList()
}

const pagination = reactive({
  current: 1,
  total: 0,
  pageSize: 10,
  showSizeChanger: true,
  pageSizeOptions: ['10', '20', '50', '100']
})

const columns = ref([
  {
    title: '序号',
    dataIndex: 'no',
    key: 'no',
    align: 'left',
    width: '50px'
  },
  {
    title: '管理路径名称',
    dataIndex: 'managePathName',
    key: 'managePathName',
    align: 'left',
    minWidth: 100
  },
  {
    title: '多选一路径',
    dataIndex: 'isSelect',
    key: 'isSelect',
    align: 'center',
    minWidth: 50
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'left',
    width: '140px'
  },
  {
    title: '创建者',
    dataIndex: 'creator',
    key: 'creator',
    align: 'left',
    widht: '80px'
  },
  {
    title: '路径概要',
    dataIndex: 'summary',
    key: 'summary',
    align: 'left',
    minWidth: 200
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    align: 'left',
    width: '200px'
  }
])

const loading = ref(false)
const List = ref([])

const getList = () => {
  loading.value = true
  const { current, pageSize } = pagination
  const obj = condition.value.reduce((c, v) => {
    if (v.value || v.value === 0) {
      return Object.assign(c, { [v.dataIndex]: v.value })
    } else {
      return c
    }
  }, {})
  const params = {
    page: current,
    limit: pageSize,
    diseaseType: props.diseaseType,
    managePathName: managePathName.value,
    ...obj
  }
  getManageList(params)
    .then((res) => {
      loading.value = false
      if (res.data.total > 0 && !res.data.list.length) {
        pagination.current = pagination.current - 1
        getList()
      } else {
        pagination.total = res.data.total
        List.value = res.data.list
      }
    })
    .catch((e) => {
      loading.value = false
    })
}

const paginationChange = (p) => {
  Object.assign(pagination, p)
  getList()
}

const onSearch = () => {
  pagination.current = 1
  getList()
}

onMounted(() => {
  getList()
})

const Del = (item) => {
  Modal.confirm({
    title: '删除',
    class: 'confirm',
    icon: createVNode(ExclamationCircleFilled, {
      style: {
        color: 'var(--color--danger)'
      }
    }),
    content: '确定删除该路径么',
    okText: '确定',
    okButtonProps: {
      danger: true,
      type: 'primary'
    },
    cancelText: '取消',
    onOk() {
      console.log('OK')
      manageDel(item.id).then(() => {
        message.success('删除成功')
        init()
        getList()
      })
    },
    onCancel() {
      console.log('Cancel')
    }
  })
}

const modal2 = reactive({
  open: false,
  type: 'save',
  loading: false,
  title: '优先级管理'
})

const sortList = ref([])

const sortListStr = ref()

const sortShow = () => {
  const params = {
    page: 1,
    limit: 9999,
    managePathName: '',
    diseaseType: props.diseaseType,
    creator: ''
  }
  getManageListAll(params)
    .then((res) => {
      if (res.data.length) {
        sortList.value = res.data

        sortListStr.value = JSON.stringify(res.data)
        modal2.open = true
      } else {
        sortList.value = []

        sortListStr.value = ''
        Modal.info({
          title: '提醒',
          content: h('span', {}, '请先添加管理路径！')
        })
      }
    })
    .catch((e) => {})
}

const modalConfirm2 = () => {
  if (sortListStr.value !== JSON.stringify(sortList.value)) {
    modal2.loading = true

    const list = _.cloneDeep(sortList.value)
    const params = list.map((v, i) => {
      return {
        id: v.id,
        sort: list.length - i
      }
    })

    manageSort(params)
      .then((res) => {
        console.log(res)
        message.success('提交成功')
        modal2.loading = false
        modal2.open = false
        getList()
      })
      .catch((e) => {
        modal2.loading = false
      })
  } else {
    Modal.info({
      title: '提醒',
      content: h('span', {}, '优先级未变更，无法提交')
    })
  }
}

const update = ref(null)

const modalShow = (item) => {
  console.log(item)
  update.value?.modalShow(item)
}

const submit_save = () => {
  conditionReset()
}

const submit_update = () => {
  init()
  getList()
}
</script>

<style lang="less" scoped>
@import url('./index.less');

.header {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  justify-content: space-between;

  .left {
    ::v-deep(.ant-space-item) {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .title {
      font-size: 14px;
      font-weight: 400;
      line-height: 32px;
      color: #4e5969;
    }
  }

  .right {
    ::v-deep(.ant-space-item) {
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
    }
  }
}

.main {
  flex: 1 1 auto;
  margin-top: 16px;
  overflow: hidden auto;

  :deep(.ant-table-wrapper) {
    .ant-table-cell {
      p {
        margin-bottom: 0;
        white-space: normal;

        .configuration {
          display: inline-block;
          max-width: 100%;
          margin-top: 10px;
          overflow: hidden;
          color: #3491fa;
          text-overflow: ellipsis;
          white-space: nowrap;
          background: #e8f7ff;
          border-color: #3491fa;

          &:nth-child(1) {
            margin-top: 0;
          }
        }

        .success {
          display: inline-block;
          max-width: 100%;
          margin-top: 10px;
          overflow: hidden;
          color: #00b42a;
          text-overflow: ellipsis;
          white-space: nowrap;
          background: #e8ffea;
          border-color: #00b42a;

          &:nth-child(1) {
            margin-top: 0;
          }
        }

        .groupTag {
          display: inline-block;
          max-width: 100%;
          margin-top: 10px;
          margin-right: 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          &:nth-child(1) {
            margin-top: 0;
          }
        }
      }
    }
  }
}

.modal2 {
  .table {
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    text-align: center;

    .td {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;

      div {
        flex: 0 0 auto;
        padding: 8px;
        word-break: break-all;
      }
    }

    .name {
      width: 30%;
    }

    .content {
      width: 50%;
    }

    .action {
      width: 20%;

      .icon-move {
        font-size: 24px;
        line-height: 32px;
        color: #4e5969;
        cursor: move;
      }
    }

    .drag {
      width: 100%;
    }
  }
}
</style>
